<template>
  <div class="adminHome">
    <div class="adminMsg" >
      <h2>我的房源</h2>
      <div class="title block">
        <span>租房信息</span>
        <span>租赁状态</span>
        <span v-if="role ==='租客'">联系人</span>
        <span>操作</span>
      </div>
      <div v-for="(item,index) in currentList" :key="index">
        <div class="info block">
          <div class="imgTitle">
            <router-link :to="{ name: 'houseDetail', params: { id: item.houseId } }">
              <img :src="item.houseImg">
            </router-link>
            <div class="houseInfo">
              <h3>{{ item.houseTitle }}</h3>
              <p ><i class="el-icon-location-outline"> {{ item.houseCity}}  {{item.houseArea}}  {{item.houseAddress}}</i></p>
              <p><i class="el-icon-date"> 租赁日期： {{ item.startDate }} 至 {{item.endDate}}</i></p>
            </div>
          </div>
          <div class="msg" >
            <p :class="['status',getStatusType(item.status)]">{{getStatusText(item.status)}}</p>
          </div>
          <div class="msg">
            <p>{{ item.landlordName }}</p>
            <p>{{ item.landlordPhone }}</p>
          </div>
          <div class="btn">
            <el-button v-if="item.status===1" type="danger" @click="cancel(item.id,item.houseId,item.renterId)">退租</el-button>
            <el-button v-if="item.status!==3&&item.status!==4" type="success" @click="handleContactLandlord(item)">反馈</el-button>
            <el-button v-if="item.status  === -1||item.status===2||item.status===4" type="warning" @click="deleteLease(item.id)" >删除</el-button>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination :current-page.sync="pageNum"
                       :page-size="pageSize"
                       :page-sizes="[3, 5, 7, 9, 20]"
                       :total="allList.length"
                       layout="total, sizes, prev, pager, next"
                       @current-change="handlePage"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible1" title="房屋退租" width="30%" @closed="close()">
      <el-form  ref="feedbackRef" :model="feedback" :rules="rules">
        <el-form-item label="reason" prop="email">
          <el-input v-model="feedback.email"  placeholder="请输入你的邮箱"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="feedback.content" :rows="4" maxlength="200"
                    placeholder="请输入您的反馈信息"
                    show-word-limit
                    type="textarea">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFeedback()">发 送</el-button>
          <el-button @click="close()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" title="联系房东" width="30%" @closed="close()">
      <el-form  ref="feedbackRef" :model="feedback" :rules="rules">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="feedback.email"  placeholder="请输入你的邮箱"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="feedback.content" :rows="4" maxlength="200"
                    placeholder="请输入您的反馈信息"
                    show-word-limit
                    type="textarea">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFeedback()">发 送</el-button>
          <el-button @click="close()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

const user =JSON.parse(localStorage.getItem('login-user'))
export default {
  name: "AdminMyHouse",
  created() {
    this.handlePage(1);
    this.getMyHome2();
    this.getRole()
  },
  data(){
    return{
      role:'',
      list:[],
      pageNum:1,
      pageSize:3,
      allList:[],
      currentList:[],
      dialogVisible1: false,
      dialogVisible: false,
      feedback:{
        email:'',
        content:'',
        houseId1:''
      },
      rules:{
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
       ]
      }
    }
  },

  methods:{
    getRole() {
      this.role = JSON.parse(localStorage.getItem('login-user')).role
    },
    //通过订单编查询用户的租房信息
    getMyHome(){
      axios({
        url: "http://localhost:8090/order/myHome/"+user.id,
        method: 'get',
      }).then(res => {
        //console.log(res.data)
        if (res.code === '200'){
          this.allList = res.data;
          this.handlePage(1);
        }
        })
      },
    getMyHome2(){
      axios({
        url:"http://localhost:8090/lease/myHome",
        methods: 'get',
      }).then(res => {
      if (res.code === '200'){
        this.allList = res.data;
        this.handlePage(1);
      }else{
        this.$message.warning(res.msg)
      }
      })
    },

    cancel(id,id1,id2){
      this.$message.warning("已向房东发送退租申请，请耐心等待")
      axios({
        url: "http://localhost:8090/lease/termination",
        method: 'post',
        data:{
          id:id,
          houseId:id1,
          renterId:id2,
        },
      }).then(res => {
        if (res.code === '200'){
          this.getMyHome2()
        }
      })
    },

    handleContactLandlord(item) {
      this.houseId1 = item.houseId // 保存当前租赁信息
      this.dialogVisible = true
    },

    submitFeedback(){
      this.$refs.feedbackRef.validate(valid => {
        if (valid) {
          axios({
            url:'/feedback/add',
            method:'post',
            data:{
              email:this.feedback.email,
              content:this.feedback.content,
              houseId:this.houseId1
            }
          }).then(res=>{
            if (res.code==='200'){
              this.$message.success('反馈成功')
              this.close();
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    close(){
      this.feedback = {
        email: '',
        content:''
      };
      this.dialogVisible = false;
    },

    deleteLease(id){
      this.$confirm('此操作将永久删除该租赁信息, 是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          url:"/lease/delete/"+id,
          method:'delete',
        }).then(res => {
          if (res.code === '200'){
            this.getMyHome2()
            this.$message.success("删除成功！")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1; // 重置到第一页
      this.handlePage(1,size)
    },

    //分页
    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    getStatusType(status) {
      switch (status){
      case 1:
        return 'status1';
      case -1:
        return 'status2';
      case 0:
        return 'status3';
      case 2:
         return 'status4';
      case 3:
        return 'status3';
      case -4:
        return 'status2';
      case 4:
        return 'status1';
      default:
        return 'status-default';
      }
    },
    getStatusText(status){
      switch (status){
      case 1:
        return '租赁中';
      case -1:
        return '已退租';
      case 2:
        return '租赁完成';
      case 3:
        return '申请审核中';
      case -4:
        return '申请不通过';
      case 4:
        return '申请通过';
      default:
        return '未知状态';
      }
    }
  },
}
</script>

<style scoped>
.adminHome{
  width: 100%;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg{
  width: 100%;
  min-height: 800px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
  margin-buttom: 15px;
  margin-left: 0px;
}

.page{
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

.block{
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child{
  flex: 4;
}

.block> :nth-child(n+2){
  flex: 2;
  text-align: center;
}

.title{
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}
.title span{
  font-size: 16px;
  font-weight: 600;
  margin-right: 1px;
}

.info{
  height: 180px;
  padding:30px 20px;
  border-bottom: 1px solid #eee;
}

.info img{
  width: 200px;
  height: 150px;
}

.info .msg{
  color: #777;
}

.imgTitle{
  display: flex;
}

.houseInfo{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.houseInfo h3{
  font-size: 18px;
  font-weight: 600;
}

.houseInfo p{
  font-size: 14px;
  color: #777;
}

.houseInfo span{
  padding: 3px 10px;
  width: 150px;
  font-size: 12px;
  color: #777;
  background-color: #eee;
}

.status{
  font-size: large;
  font-weight: 600;
  color: #fff;
}

.status1 {
  color: #20ab6c;
}

.status2 {
  color: #ff0000;
}

.status3 {
  color: #1890ff; /* 蓝色表示完成状态 */
}
.status4{
  color: #dcd91c;
}
</style>